<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <h3>
          热门品牌
          <span>国际经典 品质保证</span>
        </h3>

        <a
          href="javascript:;"
          class="iconfont icon-angle-left prev"
          :class="{ disabled: countpage === 0 }"
          @click="pagechange(-1)"
        ></a>
        <a
          href="javascript:;"
          class="iconfont icon-angle-right next"
          :class="{ disabled: countpage === 1 }"
          @click="pagechange(1)"
        ></a>
      </div>
      <div class="box">
        <ul
          class="list"
          :style="{ transform: `translateX(${-countpage * 1240}px)` }"
        >
          <li v-for="item in Hotlist" :key="item.id">
            <router-link to="/">
              <img :src="item.picture" alt="" />
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { findhotbarnd } from '@/api/home.js'
const Hotlist = ref([])
const countpage = ref(0)
const Hotshop = async () => {
  const { result } = await findhotbarnd()
  Hotlist.value = result
}
Hotshop()

// 分页功能实现
const pagechange = (val) => {
  let pages = countpage.value + val
  if (pages < 0) {
    pages = 0
  } else if (pages > 1) {
    pages = 1
  }
  countpage.value = pages
}
</script>

<style lang="scss" scoped>
.home-panel {
  background: #f5f5f5;
}
.iconfont {
  width: 20px;
  height: 20px;
  background: #ccc;
  color: #fff;
  display: inline-block;
  text-align: center;
  margin-left: 5px;
  background: $xtxColor;
  &::before {
    font-size: 12px;
    position: relative;
    top: -2px;
  }
  &.disabled {
    background: #ccc;
    cursor: not-allowed;
  }
}
.box {
  display: flex;
  width: 100%;
  height: 345px;
  overflow: hidden;
  padding-bottom: 40px;
  .list {
    width: 200%;
    display: flex;
    transition: all 1s;
    li {
      margin-right: 10px;
      width: 240px;
      &:nth-child(5n) {
        margin-right: 0;
      }
      img {
        width: 240px;
        height: 305px;
      }
    }
  }
}

.skeleton {
  width: 100%;
  display: flex;
  .item {
    margin-right: 10px;
    &:nth-child(5n) {
      margin-right: 0;
    }
  }
}

// panel 面板样式
.home-panel {
  background-color: #fff;
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      span {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
// 热门品牌样式结束
</style>
